lindell / JsBarcode

import {getEncodingHeight, getBarcodePadding} from "./shared.js";

var svgns = "http://www.w3.org/2000/svg";

	render(){

		var currentX = this.options.marginLeft;

		this.prepareSVG();

		for(let i = 0; i < this.encodings.length; i++){

			var encoding = this.encodings[i];

			var encodingOptions = merge(this.options, encoding.options);

			var group = createGroup(currentX, encodingOptions.marginTop, this.svg);

			setGroupOptions(group, encodingOptions);

			this.drawSvgBarcode(group, encodingOptions, encoding);

			this.drawSVGText(group, encodingOptions, encoding);

			currentX += encoding.width;

		}

	}

	prepareSVG(){

		// Clear the SVG

		while (this.svg.firstChild) {

			this.svg.removeChild(this.firstChild);

		}

		var totalWidth = 0;

		var maxHeight = 0;

		for(let i = 0; i < this.encodings.length; i++){

			var encoding = this.encodings[i];

			var options = merge(this.options, this.encodings[i].options);

			// Calculate the width of the encoding

			var textWidth = messureSVGtext(encoding.text, options);

			var barcodeWidth = encoding.data.length * options.width;

			encoding.width =  Math.ceil(Math.max(textWidth, barcodeWidth));

			// Calculate the height of the encoding

			var encodingHeight = getEncodingHeight(encoding, options);

			encoding.barcodePadding = getBarcodePadding(textWidth, barcodeWidth, options);

			if(encodingHeight > maxHeight){

				maxHeight = encodingHeight;

			}

			totalWidth += encoding.width;

		}

		var width = totalWidth + this.options.marginLeft + this.options.marginRight;

		this.setSvgAttributes(width, maxHeight);

	}

	drawSvgBarcode(parent, options, encoding){

		var binary = encoding.data;

		// Creates the barcode out of the encoded binary

		var yFrom;

		if(options.textPosition == "top"){

			yFrom = options.fontSize + options.textMargin;

		}

		else{

			yFrom = 0;

		}

		var barWidth = 0;

		var x;

		for(var b = 0; b < binary.length; b++){

			x = b * options.width + encoding.barcodePadding;

			if(binary[b] === "1"){

				barWidth++;

			}

			else if(barWidth > 0){

				drawLine(x - options.width * barWidth, yFrom, options.width * barWidth, options.height, parent);

				barWidth = 0;

			}

		}

		// Last draw is needed since the barcode ends with 1

		if(barWidth > 0){

		}

	}

	drawSVGText(parent, options, encoding){

		var textElem = document.createElementNS(svgns, 'text');

		// Draw the text if displayValue is set

		if(options.displayValue){

			var x, y;

			textElem.setAttribute("style",

		"font:" + options.fontOptions + " " + options.fontSize + "px " + options.font

		);

			if(options.textPosition == "top"){

				y = options.fontSize - options.textMargin;

			}

			else{

				y = options.height + options.textMargin + options.fontSize;

			}

		// Draw the text in the correct X depending on the textAlign option

			if(options.textAlign == "left" || encoding.barcodePadding > 0){

				x = 0;

				textElem.setAttribute("text-anchor", "start");

			}

			else if(options.textAlign == "right"){

				x = encoding.width - 1;

				textElem.setAttribute("text-anchor", "end");

			}

		// In all other cases, center the text

		else{

				x = encoding.width / 2;

				textElem.setAttribute("text-anchor", "middle");

			}

			textElem.setAttribute("x", x);

			textElem.setAttribute("y", y);

			textElem.appendChild(document.createTextNode(encoding.text));

			parent.appendChild(textElem);

		}

	}

	setSvgAttributes(width, height){

		var svg = this.svg;

		svg.setAttribute("width", width + "px");

		svg.setAttribute("height", height + "px");

		svg.setAttribute("x", "0px");

		svg.setAttribute("y", "0px");

		svg.setAttribute("viewBox", "0 0 " + width + " " + height);

		svg.setAttribute("xmlns", svgns);

		svg.setAttribute("version", "1.1");

		svg.style.transform = "translate(0,0)";

		if(this.options.background){

			svg.style.background = this.options.background;

		}

	}

}

function messureSVGtext(string, options){

	// Set font

	var ctx = document.createElement("canvas").getContext("2d");

	ctx.font = options.fontOptions + " " + options.fontSize + "px " + options.font;

	// Calculate the width of the encoding

	var size = ctx.measureText(string).width;

	return size;

}

function createGroup(x, y, parent){

	var group = document.createElementNS(svgns, 'g');

	group.setAttribute("transform", "translate(" + x + ", " + y + ")");

	parent.appendChild(group);

	return group;

}

function setGroupOptions(group, options){

	group.setAttribute("style",

	"fill:" + options.lineColor + ";"

	);

}

function drawLine(x, y, width, height, parent){

	var line = document.createElementNS(svgns, 'rect');

	line.setAttribute("x", x);

	line.setAttribute("y", y);

	line.setAttribute("width", width);

	line.setAttribute("height", height);

	parent.appendChild(line);

}

export default SVGRenderer;